<template>
  <div class="app-container">
    <el-card class="box-card" v-loading="loading">
      <div slot="header" class="clearfix">
        <span>考试详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回列表</el-button>
      </div>
      
      <div v-if="exam">
        <!-- 考试标题 -->
        <h2 class="exam-title">{{ exam.title }}</h2>
        
        <!-- 考试信息 -->
        <el-row :gutter="20" class="exam-info">
          <el-col :span="8">
            <div class="info-item">
              <span class="label">学科：</span>
              <span>{{ exam.subjectName }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">教育阶段：</span>
              <span>{{ exam.educationLevelName }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">试卷：</span>
              <span>{{ exam.paperTitle }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20" class="exam-info">
          <el-col :span="8">
            <div class="info-item">
              <span class="label">总分：</span>
              <span>{{ exam.totalScore }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">考试时长：</span>
              <span>{{ exam.duration }} 分钟</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">学校：</span>
              <span>{{ exam.schoolName }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20" class="exam-info">
          <el-col :span="12">
            <div class="info-item">
              <span class="label">考试开始时间：</span>
              <span>{{ formatDateTime(exam.startTime) }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="label">考试结束时间：</span>
              <span>{{ formatDateTime(exam.endTime) }}</span>
            </div>
          </el-col>
        </el-row>
        
        <!-- 考试状态 -->
        <div class="exam-status">
          <el-tag :type="getStatusType(exam.status)">{{ getStatusText(exam.status) }}</el-tag>
          
          <div class="exam-actions" v-if="exam.status === 1 && !exam.hasSubmitted">
            <el-button type="primary" @click="takeExam">参加考试</el-button>
          </div>
          
          <div class="exam-actions" v-if="exam.hasSubmitted">
            <el-button type="success" @click="viewResult">查看成绩</el-button>
          </div>
        </div>
        
        <!-- 考试说明 -->
        <div class="exam-description" v-if="exam.description">
          <h3>考试说明</h3>
          <div v-html="exam.description"></div>
        </div>
        
        <!-- 考试规则 -->
        <div class="exam-rules">
          <h3>考试规则</h3>
          <ol>
            <li>考试开始后，计时器会自动开始计时，请合理安排答题时间。</li>
            <li>考试期间请勿刷新页面，否则可能导致答题数据丢失。</li>
            <li>提交试卷后不可修改，请确认无误后再提交。</li>
            <li>考试时间结束后，系统将自动提交当前已作答的题目。</li>
            <li>考试过程中如遇技术问题，请立即联系监考老师。</li>
          </ol>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getExamDetail } from '@/api/exam';

export default {
  name: 'StudentExamDetail',
  data() {
    return {
      loading: false,
      exam: null,
      examId: null
    };
  },
  created() {
    this.examId = this.$route.params.id;
    this.getExamDetail();
  },
  methods: {
    // 获取考试详情
    getExamDetail() {
      this.loading = true;
      getExamDetail(this.examId).then(response => {
        this.exam = response.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    // 参加考试
    takeExam() {
      this.$router.push(`/student/exam/take/${this.examId}`);
    },
    // 查看成绩
    viewResult() {
      this.$router.push(`/student/exam/result/${this.exam.resultId}`);
    },
    // 返回列表
    goBack() {
      this.$router.push('/student/exams');
    },
    // 格式化日期时间
    formatDateTime(dateTime) {
      if (!dateTime) return '';
      const date = new Date(dateTime);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    // 获取状态文本
    getStatusText(status) {
      switch (status) {
        case 0: return '未开始';
        case 1: return '进行中';
        case 2: return '已结束';
        default: return '未知状态';
      }
    },
    // 获取状态标签类型
    getStatusType(status) {
      switch (status) {
        case 0: return 'info';
        case 1: return 'success';
        case 2: return 'warning';
        default: return '';
      }
    }
  }
};
</script>

<style scoped>
.exam-title {
  text-align: center;
  margin-bottom: 20px;
}

.exam-info {
  margin-bottom: 15px;
}

.info-item {
  line-height: 24px;
}

.label {
  font-weight: bold;
  color: #606266;
}

.exam-status {
  margin: 20px 0;
  text-align: center;
}

.exam-actions {
  margin-top: 15px;
}

.exam-description {
  margin: 20px 0;
  padding: 15px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.exam-rules {
  margin: 20px 0;
  padding: 15px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.exam-rules ol {
  padding-left: 20px;
}

.exam-rules li {
  line-height: 24px;
  margin-bottom: 10px;
}
</style> 